import classNames from 'classnames';
import React from 'react';
import OStyle from './index.less';
import type { IVerticalTabsParam } from './interface';

const VerticalTabs: React.FC<IVerticalTabsParam> = (props) => {
  const { tabActiveKey, courseWareTabList, onTabItemChange } = props;

  return (
    <ul className={OStyle.vertical_tabs}>
      {courseWareTabList &&
        courseWareTabList.map((tabItem, tabIndex) => (
          <li
            className={classNames(OStyle.vertical_tabs_item, {
              [`${
                process.env.processEnvDetail.REACT_APP_PLATFORM === 'boss'
                  ? OStyle.tabs_item_boss_active
                  : OStyle.tabs_item_pc_active
              }`]: tabActiveKey === tabItem.key,
            })}
            key={tabItem.key}
            onClick={() => {
              const tempTabActiveKey = tabItem.key;
              if (tabActiveKey === tempTabActiveKey) return;
              onTabItemChange?.(tempTabActiveKey, tabItem);
            }}
          >
            {tabItem.icon} {tabItem.label}
          </li>
        ))}
    </ul>
  );
};

export default VerticalTabs;
